<%@ page pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="../tld.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="../../../static/sass/common/ydui.css" />
    <link rel="stylesheet" href="../../../static/sass/common/dropload.css" />
    <link rel="stylesheet" href="../../../static/stylesheets/home/index.css" />
    <!-- 引入自适应解决方案类库 -->
    <script src="../../../static/scripts/libs/ydui.flexible.js"></script>
</head>
<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box">
            <!-- banner开始 -->
            <div class="m-slider" id="J_Slider" style="height: 200px">
                <div class="slider-wrapper">
                <c:if test="${fn:length(banner) > 0}">
                <c:forEach items="${banner}" var="item" varStatus="vs">
		            <div class="slider-item">
                        <a href="${item.link}">
                            <img src="${baseImgUrl}${item.imageBig}">
                        </a>
                    </div>
            	</c:forEach>
            	</c:if>
                </div>
                <!-- 分页标识 -->
                <div class="slider-pagination"></div>
            </div>
            <!-- banner结束 -->
            
            <!-- 图片广告开始 -->
            <div class="content" style="margin-bottom: 50px;">
                <div class="lists adver_box">
                <c:if test="${fn:length(goodlist) > 0}">
                <c:forEach items="${goodlist}" var="item" varStatus="vs">
                	<c:if test="${vs.count == 1 }">
                		<c:set var="maxId" value='${item.id}'></c:set>
                	</c:if>
                    <a class="adver_lt" href="${base}/index/getdetail?goodsId=${item.id}">
                    <c:set var="lastId" value='${item.id}'></c:set>
                        <div class="adver_img">
                            <img  src="${baseImgUrl}${item.image}" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">${item.name} </div>
                            <div class="current_price">￥${item.singleDiscount}</div>
                            <del class="old-price">￥${item.singleUnitPrice }</del>
                        </div>
                    </a>
            	</c:forEach>
            	</c:if>
                    <!-- <a class="adver_lt" href="/front/product/product_detail.html">
                        <div class="adver_img">
                            <img  src="../../../static/assets/img/peach.png" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">功夫桃黄桃罐头散打冠军黄磊代言一箱包邮 </div>
                            <div class="current_price">￥88.00</div>
                            <del class="old-price">￥14.00</del>
                        </div>
                    </a>
                    <a class="adver_lt" href="/front/product/product_detail.html">
                        <div class="adver_img">
                            <img  src="../../../static/assets/img/vegetable-fruit.png" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">六罐综合果蔬脆精美礼盒装一套</div>
                            <div class="current_price">￥96</div>
                            <del class="old-price">￥118</del>
                        </div>
                    </a>
                    <a class="adver_lt" href="/front/product/product_detail.html">
                        <div class="adver_img">
                            <img  src="../../../static/assets/img/fruit.png" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">水果脆片健康休闲食品</div>
                            <div class="current_price">￥20</div>
                            <del class="old-price">￥25</del>
                        </div>
                    </a>
                    <a class="adver_lt" href="/front/product/product_detail.html">
                        <div class="adver_img">
                            <img  src="../../../static/assets/img/vegetable.png" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">蔬菜脆片健康休闲食品</div>
                            <div class="current_price">￥18.80</div>
                            <del class="old-price">￥23</del>
                        </div>
                    </a>
                    <a class="adver_lt" href="/front/product/product_detail.html">
                        <div class="adver_img">
                            <img  src="../../../static/assets/img/pear.png" alt="">
                        </div>
                        <div class="adver_text">
                            <div class="text">美味时尚健康酥梨膏精美礼盒套装一套 </div>
                            <div class="current_price">￥78</div>
                        </div>
                    </a> -->
                </div>
            </div>
            
            <!-- 图片广告结束 -->

        </section>
        <!-- 主体内容结束 -->



        <!-- 底部导航开始 -->
        <footer class="m-tabbar">
            <a href="${base}/index/index" class="tabbar-item tabbar-active">
                <span class="tabbar-icon">
                    <i class="icon-home"></i>
                </span>
                <span class="tabbar-txt">商城</span>
            </a>
            <a href="${base}/cart/index?uid=${uid}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-shopcart-outline"></i>
                    <span class="badge badge-danger"<c:if test="${cartcount == 0}"> style="display: none;"</c:if>>${cartcount }</span>
                </span>
                <span class="tabbar-txt">购物车</span>
            </a>
            <a href="${base}/user/index?userId=${uid}" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-ucenter-outline"></i>
                </span>
                <span class="tabbar-txt">我的</span>
            </a>
        </footer>
        <!-- 底部导航结束 -->
    </div>
    <!-- 引入jQuery 2.0+ -->
    <script src="../../../static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="../../../static/scripts/libs/ydui.js"></script>
    <script src="../../../static/scripts/libs/dropload.js"></script>
    <script>
        //banner
        $('#J_Slider').slider({
            speed: 200,
            autoplay: 2000,
            lazyLoad: true
        });
        
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 5;
		var lastId = ${lastId};
		var maxId = ${maxId};
        // dropload
        $('.content').dropload({
            scrollArea : window,
            domUp : {
                domClass   : 'dropload-up',
                domRefresh : '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
                domUpdate  : '<div class="dropload-update">↑释放更新-自定义内容</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
            },
            domDown : {
                domClass   : 'dropload-down',
                domRefresh : '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
                domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
                domNoData  : '<div class="dropload-noData">暂无数据-自定义内容</div>'
            },
            loadUpFn : function(me){
                $.ajax({
                    type: 'GET',
                    url: '${base}/index/getindex',
                    data:{which:1,size:20,lastId:maxId},
                    dataType: 'json',
                    success: function(data){
                        console.log(data)
                         var arrLen = data.code;
                        var result = '';
                        var list = data.data;
                        if(arrLen == 0 && list.length > 0){
	                        for(var i = 0; i < list.length; i++){
	                        	if(i == 0){
	                        		maxId = list[i].id;
	                        	}
	                        	result += '<a class="adver_lt" href="${base}/index/getdetail?goodsId='+list[i].id+'">'
	                                + '<div class="adver_img">'
	                                +    '<img  src="${baseImgUrl}'+list[i].image+'" alt="">'
	                                + '</div>'
	                                + '<div class="adver_text">'
	                                +    '<div class="text">'+list[i].name+'</div>'
	                                +   '<div class="current_price">￥'+list[i].singleDiscount+'</div>'
	                                +   '<del class="old-price">￥'+list[i].singleUnitPrice+'</del>'
	                                + '</div>'
	                            + '</a>'
	                        }
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            $('.lists').prepend(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            page = 0;
                            // 解锁loadDownFn里锁定的情况
                            /* me.unlock();
                            me.noData(false); */
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn : function(me){
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: '${base}/index/getindex',
                    data:{which:-1,size:20,lastId:lastId},
                    dataType: 'json',
                    success: function(data){
                        var arrLen = data.code;
                        var list = data.data;
                        if(arrLen == 0 && list.length > 0){
                            for(var i=0; i<list.length; i++){
                            	lastId=list[i].id;
                                result += '<a class="adver_lt" href="${base}/index/getdetail?goodsId='+list[i].id+'">'
                                        + '<div class="adver_img">'
                                        +    '<img  src="${baseImgUrl}'+list[i].image+'" alt="">'
                                        + '</div>'
                                        + '<div class="adver_text">'
                                        +    '<div class="text">'+list[i].name+'</div>'
                                        +   '<div class="current_price">￥'+list[i].singleDiscount+'</div>'
                                        +   '<del class="old-price">￥'+list[i].singleUnitPrice+'</del>'
                                        + '</div>'
                                    + '</a>'
                            }
                        // 如果没有数据
                        }else{
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 插入数据到页面，放到最后面
                            $('.lists').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        },1000);
                    },
                    error: function(xhr, type){
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold : 50
        });
    </script>
</body>

</html>

